<template>
	<view class="container">
		<view class="tab-wrap">
			<view class="tab-item" :class="[tabIndex == index ? 'tab-act':'']" v-for='(item,index) in tab'
				@tap='changeTab(index)'>{{item.name}}</view>
		</view>
		<view style="height: 80rpx;"></view>
		<!-- 我的订单列表 -->
		<view class="order_list" @click="jumpOrderDetail(item.order_sn)" v-for="(item,index) in orders_list"
			:key="index">
			<view class="order_num">
				<view class="num">
					<text>订单编号：{{item.order_sn}}</text>
				</view>
				<view class="status">
					{{ item.order_status == 0? '待支付': item.order_status == 1? '已支付': ( item.order_status == 2? (item.is_dividend == 1?'待自提':'待收货') : item.order_status == 3? '已完成': '')}}
				</view>
			</view>
			<view class="order_cont" v-for="(item_val,index_val) in item.order_item" :key="index_val">
				<image :src="item_val.g_pic" mode=""></image>
				<view class="tit">
					{{item_val.goodname}}
				</view>
				<view class="order_info">
					<text>¥ <text class="price">{{ item_val.price}}</text> </text>
					<text class="stock">x{{item_val.nums}} </text>
				</view>
			</view>
			<view class="order-total">
				共计{{item.order_item_count}}件商品，商品合计 ￥{{item.final_money}}
			</view>
			<view class="order_btn">
				<view style="display: flex;align-items: center;">
					<view class="btn" style="margin-left: 20rpx;" @tap.stop="comfire_take(item.order_sn)"
						v-if="item.order_status == 2">
						确认收货
					</view>
					<view class="btn" v-if="item.order_status == 1">
						等待发货
					</view>
					<view class="btn" v-if="item.order_status == 0" style="border: 2rpx solid #757575; color: #757575;"
						@tap.stop="hide_order(item.id)">
						取消订单
					</view>
					<view class="btn" v-if="item.order_status == 0" style="margin-left: 20rpx;"
						@tap.stop="pays(item.id)">
						立即支付
					</view>
				</view>
			</view>
		</view>

		<wyb-popup ref="popups" type="bottom" height="450" :showCloseIcon="false">
			<view class="popup-content">
				<view class="pay_content">
					<text>选择支付方式</text>
				</view>
				<view class="contents">
					<view class="wechat_pay" @click="pays_wechat">
						<view class="wechat_payimg">
							<image
								src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/7a84c367737035a83bcab6809b628cdd09faa6a7.png"
								mode=""></image>
							<text>微信支付</text>
						</view>
						<view class="radio-content">
							<view class="radio-content">
								<view class="radio" :class="radio_wechat == 1 ? 'radio-default':''">
									<view :class="radio_wechat == 1 ? 'radio-active':'radio-active-add'"></view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="pay_info">
					<view class="add_place" @click="rest_pay()">
						确定
					</view>
				</view>
			</view>
		</wyb-popup>

		<view class="no_box" v-if="orders_list.length == 0">
			<image
				src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/f9bede86ecf6777ae86c83afe8c3747d9693e80f.png"
				mode=""></image>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import orderItem from '@/components/order-item/order-item.vue'
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			orderItem,
			wybPopup
		},
		data() {
			return {
				tab: [{
						name: '全部',
						id: -1,
					},
					{
						name: '待付款',
						id: 0,
					},
					{
						name: '待发货',
						id: 1,
					},
					{
						name: '待收货',
						id: 2,
					},
					{
						name: '已完成',
						id: 3,
					},
				],
				tabId: -1,
				tabIndex: 0,
				radio_wechat: 1,
				orders_list: [],
				order_id: ''
			};
		},
		onLoad(option) {
			if (option.index) {
				this.tabIndex = option.index;
				this.tabId = this.tab[this.tabIndex].id
			}
		},
		onShow() {
			this.order_list()
		},
		methods: {
			// 立即支付弹窗
			pays(order_id) {
				this.order_id = order_id
				this.$refs.popups.show()
			},
			changeTab(index) {
				this.tabIndex = index;
				this.tabId = this.tab[index].id
				this.order_list()
			},
			logistics_nav(order_sn) {
				uni.navigateTo({
					url: '/pages/user/logistics/logistics?order_sn=' + order_sn
				})
			},
			jumpOrderDetail(order_sn) {
				uni.navigateTo({
					url: '/pages/user/order-detail/order-detail?order_sn=' + order_sn
				})
			},
			// 订单列表
			order_list() {
				let that = this;
				app.globalRequest({
					api: app.getApi().user.orderList,
					data: {
						status: that.tabId
					},
					method: 'post'
				}).then(res => {
					if (res.code == 1) {
						that.orders_list = res.data
					}
				}).catch(err => {

				})
			},
			// 确认收货
			comfire_take(order_sn) {
				let that = this;
				app.globalRequest({
					api: app.getApi().user.comfireOrder,
					data: {
						order_sn: order_sn
					},
					method: 'post'
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						that.order_list()
					}
				}).catch(err => {

				})
			},

			// 	重新支付
			rest_pay() {
				let that = this;
				this.$refs.popups.hide()
				app.globalRequest({
					api: app.getApi().user.repeatPay,
					data: {
						order_id: that.order_id,
					},
					method: 'post'
				}).then(res => {
					if (res.code == 0) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: `${res.data.timestamp}`,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: function(res) {
								uni.showToast({
									title: '支付成功',
									icon: 'none'
								})
								that.order_list()
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								})
							}
						})
					}
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						that.order_list()
					}
				}).catch(err => {

				})
			},
			// 取消订单
			hide_order(order_id) {
				let that = this;
				app.globalRequest({
					api: app.getApi().user.cancelOrder,
					data: {
						order_id: order_id
					},
					method: 'get'
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						that.order_list()
					}
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						that.order_list()
					}
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 60rpx;
	}

	.tab-wrap {
		width: 100%;
		height: 80rpx;
		background: $dis-con-color;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 888;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid $dis-bg-color;

		.tab-act {
			position: relative;
			color: $dis-font-color;

			&:after {
				content: '';
				width: 46rpx;
				height: 4rpx;
				background: $dis-font-color;
				border-radius: 4rpx;
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				bottom: -10rpx;
			}
		}
	}

	.wrap {
		padding-top: 80rpx;
	}

	.order_list {
		margin: 24rpx 24rpx 0;
		background-color: #fff;
		overflow: hidden;
		border-radius: 16rpx;
		padding: 24rpx;

		.order_num {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;

			.status {
				color: #FF7040;
			}
		}

		.order_cont {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			padding-top: 24rpx;

			image {
				width: 176rpx;
				height: 176rpx;
				border-radius: 16rpx;
			}

			.tit {
				width: 50%;
				color: #000;
				font-size: 28rpx;
			}

			.order_info {
				// width: 15%;
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				text {
					color: #323233;
					font-size: 24rpx;

					.price {
						font-size: 32rpx;
						margin-left: 5rpx;
					}
				}

				.stock {
					font-size: 24rpx;
					color: #AFB0B2;
					margin-top: 10rpx;
				}
			}
		}

		.order-total {
			padding: 24rpx 0;
			font-size: 24rpx;
			color: #AFB0B2;
			text-align: right;
		}

		.order_btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.btn {
				padding: 15rpx 30rpx;
				box-sizing: border-box;
				border: 2rpx solid #FF5040;
				color: #FF5040;
				border-radius: 34rpx;
				font-size: 24rpx;
			}

			.btns {
				color: #000;
				border: 2rpx solid #AFB0B2;

			}
		}
	}


	.pay_content {
		width: 100%;
		text-align: center;
	}

	.wechat_pay,
	.offline_pay {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 32rpx 0rpx;
		box-sizing: border-box;
		margin-top: 62rpx;

		// border-top: 2rpx solid #EEEEEE;
		.wechat_payimg,
		.offline_payimg {
			display: flex;
			align-items: center;

			image {
				width: 45rpx;
				height: 39rpx;
			}

			text {
				font-size: 28rpx;
				color: #333;
				margin-left: 20rpx;
			}
		}
	}

	.offline_pay {
		padding: 0rpx 32rpx 0rpx;

		.offline_payimg {
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

	}

	.pay_info {
		width: 686rpx;
		height: 80rpx;
		background: $dis-liner-color;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		margin: 60rpx auto 0;
		color: #fff;
	}



	.radio-content {
		display: flex;
		align-items: center;

		.col {
			color: #B38E65;
		}
	}

	.radio {
		padding: 4rpx;
		box-sizing: border-box;
		border-radius: 50%;
		border: 2rpx solid #CCCCCC;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0rpx 15rpx;
	}

	.radio-active {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background-color: #EC1818;
	}

	.radio-active-add {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background-color: #fff;
	}


	.radio-default {
		border: 2rpx solid #EC1818;
	}



	.no_box {
		width: 250rpx;
		height: 250rpx;
		margin: 400rpx auto;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>